<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>模型编辑</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link type="text/css" rel="stylesheet" href="plugin/layui/css/layui.css">
    <link type="text/css" rel="stylesheet" href="plugin//zTree/css/zTreeStyle/zTreeStyle.css">
    <link type="text/css" rel="stylesheet" href="css/common.css">
    <link type="text/css" rel="stylesheet" href="css/edit.css">

    <!--该js引用需要放在所有js之前-->
    <script src="js/resource.js"></script>
</head>
<body>

<div class="layui-layout-body">

    <div class="layui-layout layui-layout-admin">
        <div class="layui-header layui-admin-header">
            <div class="layui-header-title">模型编辑</div>
        </div>
        <div class="layui-side layui-bg-black layui-admin-left">
            <div class="layui-side-scroll">
                <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
                <ul id="datasourceTree" class="ztree"></ul>

            </div>
        </div>
        <div class="layui-body layui-admin-right">
            <section class="layui-body-section" style="display: none;">
                <!-- 内容主体区域 -->
                <form class="layui-form layui-form-pane" action="">

                    <fieldset class="layui-elem-field layui-field-title">
                        <legend>入参配置</legend>
                    </fieldset>
                    <!--<div class="layui-form-item" pane="">
                        <label class="layui-form-label">开关-开</label>
                        <div class="layui-input-block">
                            <input type="checkbox" checked="" name="open" lay-skin="switch" lay-filter="switchTest"
                                   title="开关">
                        </div>
                    </div>-->
                    <div class="requestParam">

                    </div>
                    <fieldset class="layui-elem-field layui-field-title">
                        <legend>预期配置</legend>
                    </fieldset>
                    <div class="expectParam">

                    </div>
                    <div class="layui-form-item">
                        <button class="layui-btn layui-btn-sm" lay-submit="" lay-filter="add">
                            <i class="layui-icon">&#xe654;&nbsp;暂&nbsp;存</i>
                        </button>
                    </div>
                </form>
            </section>
            <section style="bottom: 0px;position: fixed;right: 0px;z-index: 1000000;">
                <!--<hr class="layui-bg-blue">-->
                <div class="layui-layer-btn layui-layer-btn-">
                    <a class="layui-layer-btn0" id="submitAll"><i class="layui-icon">&#xe608;&nbsp;全部提交</i></a>
                </div>
            </section>
        </div>

    </div>
</div>

<script id="param_temp" type="text/html">
    {{# if(d && d.data.length>0){ }}
    {{#  layui.each(d.data, function(index, item){ }}
    {{# if(index >= 3 && (index)%3 == 0){ }}
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label tipClassSoftware">{{ item.describe }}</label>
            <div class="layui-input-block">
                <input type="text" name="{{ item.key }}"
                       value="{{# if(item.value!=undefined){ }}{{ item.value }}{{# } }}" autocomplete="off"
                       {{# if(d.disabled){ }} disabled="disabled" {{# } }}
                       class="layui-input">
            </div>
        </div>
        {{# }else if(index == 0){ }}
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label tipClassSoftware">{{ item.describe }}</label>
                <div class="layui-input-block">
                    <input type="text" name="{{ item.key }}"
                           value="{{# if(item.value!=undefined){ }}{{ item.value }}{{# } }}" autocomplete="off"
                           {{# if(d.disabled){ }} disabled="disabled" {{# } }}
                           class="layui-input">
                </div>
            </div>
            {{# }else{ }}
            <div class="layui-inline">
                <label class="layui-form-label tipClassSoftware">{{ item.describe }}</label>
                <div class="layui-input-block">
                    <input type="text" name="{{ item.key }}"
                           value="{{# if(item.value!=undefined){ }}{{ item.value }}{{# } }}" autocomplete="off"
                           {{# if(d.disabled){ }} disabled="disabled" {{# } }}
                           class="layui-input">
                </div>
            </div>
            {{# } }}
            {{# }); }}
        </div>
        {{# } }}
</script>
<script id="expect_temp" type="text/html">
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">预期报文&nbsp;</label>
        <div class="layui-input-block">
            <textarea  name="request" class="layui-textarea" placeholder="">{{ d }}</textarea>
        </div>
    </div>
</script>
<script type="text/javascript" src="plugin/zTree/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="plugin/zTree/js/jquery.ztree.all.min.js"></script>
<script type="text/javascript" src="plugin/zTree/js/jquery.ztree.exhide.min.js"></script>
<script src="plugin/layui/layui.js"></script>
<script type="text/javascript">
    layui.config({
        base: 'js/lib/'
    }).extend({
        common: 'common'
    });
    layui.use(['element', 'common', 'table', 'form', 'laytpl'], function () {
        var form = layui.form,
            laytpl = layui.laytpl,
            table = layui.table,
            element = layui.element,
            common = layui.common,
            globalReqJson = "",
            seqNo = common.getQueryString("seqNo"),
            modelId = common.getQueryString("modelId"),
            modelName = common.getQueryString("modelName");
        var zTreeSet = {
            zTreeObj: {},
            setting: {
                view: {
                    selectedMulti: false
                },
                callback: {
                    onClick: function (event, treeId, treeNode) {
                        $(".layui-body-section").hide("fast", function () {
                            $(".requestParam").html("");
                            $(".expectParam").html("");
                            if (treeNode.isParent) {
                                return false;
                            }
                            if (common.cmsInArrayTwo(treeNode.id, "id", chooseData.moulds)) {
                                funcs.nodeClickAfter(chooseData.moulds[common.cmsInArrayIndexTwo(treeNode.id, "id", chooseData.moulds)], treeNode);
                                return false;
                            }
                            common.cmsAjax({
                                url: globalParam.getUrl("edit", "getInitData"),
                                data: {
                                    interfaceId: treeNode.id || "",
                                    templateId: modelId || "",
                                    enterParam : globalReqJson || "",
                                },
                                successFunc: function (res) {
                                    funcs.nodeClickAfter(res.data, treeNode);
                                }
                            });
                        });
                        return false;
                    }
                }
            },
            zTreeNodes: []
        };
        var chooseData = {
            templateDescribe:modelName,
            moulds: [],
            enterParam:"",
        };
        table.set({
            page: true,
            limits: [15, 50, 100, 200],
            limit: 15,
            loading: true,
            height: 'auto',
            even: true,
            size: 'sm',
            method: 'post'
        });
        var funcs = {
            //初始化数据源
            init: function () {
                common.cmsAjax({
                    url: globalParam.getUrl("edit", "init"),
                    data: {
                        flag: false,
                        templateId: modelId || ""
                    },
                    successFunc: function (res) {
                        zTreeSet.zTreeNodes = res.data;
                        zTreeSet.zTreeObj = $.fn.zTree.init($("#datasourceTree"), zTreeSet.setting, zTreeSet.zTreeNodes);
                        zTreeSet.zTreeObj.expandAll(true);
                    }
                });
                return this;
            },
            //暂存
            add: function (treeNodeId, parentName,name, params) {
                form.on('submit(add)', function (addData) {
                    if (!params.reqParam) {
                        return false;
                    }
                    var req = {
                        id: treeNodeId,
                        flag:params.flag,
                        name: name,
                        mouldId : params.mouldId,
                        reqParam: [],
                        mould: "",
                        parentName:parentName
                    };
                    for (var key in addData.field) {
                        if (common.cmsInArrayTwo(key, "key", params.reqParam)) {
                            req.reqParam.push({
                                key: key,
                                value: addData.field[key],
                                describe: params.reqParam[common.cmsInArrayIndexTwo(key, "key", params.reqParam)].describe
                            });
                        } else{
                            req.mould = addData.field[key];
                        }
                    }
                    ;
                    if (common.cmsInArrayTwo(treeNodeId, "id", chooseData.moulds)) {
                        chooseData.moulds.splice(common.cmsInArrayIndexTwo(treeNodeId, "id", chooseData.moulds), 1);
                    }
                    chooseData.moulds.push(req);
                    common.cmsInfo("暂存成功!", "信息");
                    return false;
                });
                return this;
            },
            //全部提交
            submitAll: function () {
                $("#submitAll").click(function () {
                    if (!chooseData.moulds || chooseData.moulds.length <= 0) {
                        common.cmsInfo("无修改数据源", "提示");
                        return false;
                    }
                    var describes = {};
                    for (var i = 0, length = chooseData.moulds.length; i < length; i++) {
                        var parentName = chooseData.moulds[i].parentName;
                        var name = chooseData.moulds[i].name;
                        if (!describes[parentName]) {
                            describes[parentName] = [name];
                        } else {
                            describes[parentName].push(name);
                        }
                    }
                    var content = "<div>";
                    for (var key in describes) {
                        content += key + " : " + "<br>&nbsp;&nbsp;&nbsp;&nbsp;" + describes[key].join(" , ") + "<br>";
                    }
                    content += "</div>";
                    layer.confirm(content, {title: '确认修改数据源'}, function (index) {
                        layer.close(index);
                        chooseData.enterParam = globalReqJson;
                        chooseData.templateId = modelId || "";
                        /*alert(JSON.stringify(chooseData));*/
                        common.cmsAjax({
                            url: globalParam.getUrl("edit", "submitAll"),
                            data: chooseData,
                            successFunc: function (res) {
                                common.cmsInfo("保存成功!", "信息", function (index) {
                                    layer.close(index);
                                    top.location.reload();
                                });
                            }
                        });
                    });
                    return false;
                });
                return this;
            },
            //节点点击后续处理
            nodeClickAfter: function (data, treeNode) {
                laytpl($("#param_temp").html()).render({data: data.reqParam || [],disabled:true}, function (html) {
                    $(".requestParam").html(html);
                });
                laytpl($("#expect_temp").html()).render(data.mould || "", function (html) {
                    $(".expectParam").html(html);
                });
                common.hoverTip();
                $(".layui-body-section").show("fast");
                funcs.add(treeNode.id, treeNode.getParentNode().name , treeNode.name, data);
            },
            //获取父页面请求json
            gerReqJson : function(){
                common.cmsAjax({
                    url: globalParam.getUrl("edit", "getReq"),
                    data: {
                        seqNo: seqNo
                    },
                    successFunc: function (res) {
                        globalReqJson = res.data;
                        return false;
                    }
                });
                return this;
            },
            //修改title
            changeTitle: function () {
                $(".layui-header-title").html(modelName || "编辑模型");
                return this;
            }

        };
        funcs.gerReqJson().changeTitle().init().submitAll();


    });
</script>
</body>
</html>